<template>
	<view class="content">
		<navBar></navBar>
		<view class="flex-box">
			<view class="left-nav">
				<view :class=" ['item',CategoryID == item.id?'on':'']" v-for="(item,index) in LeftNav" :key="index"
					:item-id="index" :data-id="item.id" @click="navBtn">
					{{item.name}}
				</view>
			</view>

			<scroll-view scroll-y="true" class="list">
				<view class="banner">
					<navigator class="img" :url="navimg.url + '&typeId=' + CategoryID">
						<image :src="baseUrl+navimg.appPath" mode="widthFix"></image>
						<!-- <view class="text">
							{{navimg.title}}
						</view> -->
					</navigator>
				</view>

				<view class="pnav">
					<view class="left">
						<view class="item" @click="pad_btn">
							价格<image :src="orderBy==1?rise:fall" mode="heightFix"></image>
						</view>
						<!-- <view class="item">
							筛选<image src="../../static/images/icon46.png" mode="heightFix"></image>
						</view> -->
					</view>
					<!-- <view class="right" @click="popbtn">
						<image src="../../static/images/icon47.png" mode="heightFix"></image>
					</view> -->
				</view>

				<view class="product-list">
					<view @click="godeta" class="item" v-for="(item,index) in Plist" :key="index" :item-id="index"
						:data-id="item.id">
						<image :src="baseUrl+item.image.source"></image>
						<view class="name">
							{{item.name}}
						</view>
						<view class="money">
							￥{{item.price}}
						</view>
					</view>
				</view>


			</scroll-view>
		</view>

		<view class="pop" v-if="sxpop">
			<view class="sx-box">
				<view class="tit">
					<text>筛选</text>
					<image class="close" @click="popbtn" src="../../static/images/icon49.png" mode="widthFix"></image>
				</view>
				<view class="scroll">
				<view class="ss-item">
					<view class="s-t">
						系列
					</view>
					<view class="list">
						<view :class="['item',xlid == item.id?'on':'']" v-for="(item,index) in seriesCategory" :key="index" :item-id="index" :data-id="item.id" @click="chosexl">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="ss-item">
					<view class="s-t">
						价格区间
					</view>
					<view class="list">
						<view :class="['item',maxPrice == item.maxPrice||minPrice == item.minPrice?'on':'']" v-for="(item,index) in priceRange" :key="index" :item-id="index" :data-max="item.maxPrice" :data-min="item.minPrice" @click="chosejg">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="ss-item">
					<view class="s-t">
						材质
					</view>
					<view class="list">
						<view :class="['item',czid == item.id?'on':'']" v-for="(item,index) in materialCategory" :key="index" :item-id="index" :data-id="item.id" @click="chosecz">
							{{item.name}}
						</view>
					</view>
				</view>
				</view>
				
				<view class="sx-btn">
					<view class="btn" @click="reset">重置</view>
					<view class="btn" @click="use">应用</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import navBar from '@/components/navbar/navbar.vue';
	import {
		productIndex
	} from '@/api/home.js'
	import {
		productPage,
		getCategory
	} from '@/api/product.js';

	export default {
		components: {
			navBar
		},
		data() {
			return {
				baseUrl: this.$baseUrl,
				LeftNav: [],
				Plist: [],
				CategoryID: '',
				navimg: '',
				orderBy: 1,
				rise: '../../static/images/icon45.png',
				fall: '../../static/images/icon45-1.png',
				seriesCategory:[],
				materialCategory:[],
				priceRange:[],
				sxpop:false,
				xlid:'',
				czid:'',
				maxPrice:'',
				minPrice:''
			}
		},
		onLoad() {
			this.category();
		},
		
		
		onShareAppMessage(e) {
			console.log(e, 1111111)
			let mpShare={
				title:'久福到家',
				path:'/pages/index/index?scene='
			}
			
			if(uni.getStorageSync('inviteId')){
				let inviteId=uni.getStorageSync('inviteId')
				mpShare.path='/pages/index/index?scene='+inviteId
			}
			return mpShare
		},
		methods: {
			category() {
				getCategory().then(res => {
					console.log(res)
					this.LeftNav = res.data.recommendType,
					this.CategoryID = res.data.recommendType[0].id,
					this.seriesCategory = res.data.category[4].seriesCategory,  //系列
					this.materialCategory = res.data.category[4].materialCategory,  //材质
					this.priceRange = res.data.priceRange,  //价格
					this.list(this.CategoryID);
				})
			},

			list(e) {
				console.log(e)
				productPage({
					type: 'GENERAL',
					recommendTypeId: e,
					seriesCategoryId:this.xlid,
					materialCategoryId:this.czid,
					startPrice:this.minPrice,
					endPrice:this.maxPrice
				}).then(res => {
					console.log(res)
					if (res.data.page != undefined) {
						this.Plist = res.data.page.list
						this.navimg = res.data.navigation_app
					} else {
						this.Plist = []
					}
				})
			},

			navBtn(e) {
				var id = e.currentTarget.dataset.id
				this.CategoryID = id
				this.list(id)
			},

			godeta(e) {
				var id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: './details?pid=' + id + '&typeId=' + this.CategoryID
					// url: './details?pid=' + id
				})
			},

			pad_btn() {
				if (this.orderBy == 1) {
					this.orderBy = 2
					console.log(this.orderBy)
				} else {
					this.orderBy = 1
				}
				productPage({
					type: 'GENERAL',
					recommendTypeId: this.CategoryID,
					orderBy: this.orderBy,
					seriesCategoryId:this.xlid,
					materialCategoryId:this.czid,
					startPrice:this.minPrice,
					endPrice:this.maxPrice
				}).then(res => {
					console.log(res)
					if (res.data.page != undefined) {
						this.Plist = res.data.page.list
						this.navimg = res.data.navigation_app
					} else {
						this.Plist = []
					}
				})
			},

			popbtn() {
				this.sxpop = this.sxpop == false ? true : false;
			},

			chosexl(e){
				this.xlid = e.currentTarget.dataset.id
			},
			chosecz(e){
				this.czid = e.currentTarget.dataset.id
			},
			chosejg(e){
				this.maxPrice = e.currentTarget.dataset.max
				this.minPrice = e.currentTarget.dataset.min
			},
			
			reset(){
				this.xlid = '',
				this.czid = '',
				this.maxPrice = '',
				this.minPrice = ''
			},
			
			use(){
				this.sxpop = false,
				productPage({
					type: 'GENERAL',
					recommendTypeId: this.CategoryID,
					orderBy: this.orderBy,
					seriesCategoryId:this.xlid,
					materialCategoryId:this.czid,
					startPrice:this.minPrice,
					endPrice:this.maxPrice,
				}).then(res => {
					console.log(res)
					if (res.data.page != undefined) {
						this.Plist = res.data.page.list
						this.navimg = res.data.navigation_app
					} else {
						this.Plist = []
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.flex-box {
		position: fixed;
		display: flex;
		height: 100%;
		padding-bottom: 170rpx;

		.left-nav {
			width: 180rpx;
			overflow: scroll;
			height: 100%;

			.item {
				width: 100%;
				height: 100rpx;
				background-color: #f7f8f8;
				border-bottom: 1px solid #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #595757;
				font-size: 24rpx;
			}

			.item.on {
				background-color: #b81c22;
				color: #fff;
			}
		}

		.list {
			flex: 1;
			overflow: scroll;
			height: 100%;
			width: 100%;

			.banner {
				width: 100%;

				.img {
					width: 100%;
					width: 570rpx;
					margin: auto;
					position: relative;

					.text {
						width: 100%;
						text-align: center;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						color: #fff;
						font-size: 36rpx;
						letter-spacing: 2rpx;
						font-weight: bold;
					}

				}
			}
		}

		.pnav {
			padding: 40rpx 30rpx;
			color: #898989;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.item {
					display: flex;
					align-items: center;
					margin-right: 50rpx;

					image {
						height: 20rpx;
						margin-left: 10rpx;
					}
				}
			}

			.right {
				image {
					height: 20rpx;
				}
			}
		}

		.product-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 30rpx;

			.item {
				width: 47%;
				font-size: 24rpx;
				text-align: center;
				margin-bottom: 60rpx;
				image {
					margin-bottom: 30rpx;
					height: 240rpx;
					width: 240rpx;
				}

				.name {
					color: #595757;
					margin-bottom: 20rpx;
				}

				.money {
					color: #898989;
				}
			}
		}
	
		
		
		
	}
	.pop{
		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		
		.sx-box{
			width: 80%;
			height: 100%;
			background-color: #fff;
			float: right;
			
			.scroll {
				overflow: auto;
				padding-bottom: 120rpx;
				max-height: calc(100% - 304rpx);
			}
			
			.tit{
				height: 100rpx;
				line-height: 100rpx;
				position: relative;
				text-align: center;
				border-bottom: 1px solid #f5f5f5;
				margin-bottom: 30rpx;
				
				image{
					width: 30rpx;
					position: absolute;
					top: 50%;
					right: 40rpx;
					transform: translateY(-50%);
				}
				text{
					font-size: 30rpx;
				}
			}
			
			.ss-item{
				padding: 0 30rpx;
				.s-t{
					font-size: 28rpx;
					
					padding-bottom: 30rpx;
				}
				.list{
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
					
					.item{
						width: 48%;
						line-height: 70rpx;
						text-align: center;
						border: 1px solid #898989;
						font-size: #898989;
						margin-bottom: 30rpx;
					}
					
					.item.on{
						background-color: #b81c22;
						color: #fff;
						border: none;
					}
				}
			}
			
			.sx-btn{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120rpx;
				width: 80%;
				border-top: 1px solid #898989;
				padding: 0 30rpx;
				position: fixed;
				right: 0;
				bottom: 0;
				background-color: #fff;
				
				.btn{
					width: 45%;
					text-align: center;
					height: 70rpx;
					line-height: 70rpx;
					border: 1px solid;
				}
				.btn:nth-child(2){
					background-color: #000;
					color: #fff;
					border: 1px solid;
				}
			}
		}
	}
</style>
